<template>
  <div class="oneDiv">
    <div class="sumDiv">
      <!-- 新增按钮和搜索框start -->
      <div class="headFromDiv">
        <div class="leftDiv">
          <el-button type="primary" @click="dialogFormVisible = true"
            >新增通讯录</el-button
          >
        </div>
        <div class="rightDiv">
          <el-row class="elrow">
            <el-col>
              <el-form
                :inline="true"
                :model="searchData"
                class="demo-form-inline"
              >
                <el-form-item>
                  <el-input
                    v-model="searchData.name"
                    placeholder="请输入名称"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="seachTableData()">搜索</el-button>
                  <el-button @click="resetQuery()">重置</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 新增按钮和搜索框end-->
      <!-- 左侧条查 -->
      <div class="leftDiv2">
        <el-menu class="menu">
          <el-menu-item class="item" @click="searchAll"
            >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;全部 &nbsp; &nbsp; &nbsp; &nbsp;
            &nbsp;<el-tag type="success">{{ total1 }}</el-tag></el-menu-item
          >
          <el-menu-item class="item" @click="searchData1"
            >快递服务</el-menu-item
          >
          <el-menu-item class="item" @click="searchData2"
            >外卖订餐</el-menu-item
          >
          <el-menu-item class="item" @click="searchData3"
            >银行客服</el-menu-item
          >
          <el-menu-item class="item" @click="searchData4"
            >酒店预订</el-menu-item
          >
          <el-menu-item class="item" @click="searchData5"
            >包车服务</el-menu-item
          >
          <el-menu-item class="item" @click="searchData6"
            >会场预定</el-menu-item
          >
        </el-menu>
      </div>

      <!-- 表格信息展示start -->
      <div class="bottomDiv">
        <el-table
          :data="tableData"
          border
          style="width: 95%; margin-left: 25px"
          :header-cell-style="{ background: '#f4f4f4', color: 'black' }"
        >
        <el-table-column prop="name" label="文章标题" width="100">
            <template slot-scope="scope">
              <router-link :to="{name :'xiangqing4',query:{ a:scope.row}}"  style="text-decoration: none; color: #1890FF;">{{ scope.row.name }}</router-link>
              </template>
          </el-table-column>
          <el-table-column prop="fixedTelephone" label="固定电话" width="100">
          </el-table-column
          >>
          <el-table-column prop="mobilePhone" label="移动电话" width="189">
          </el-table-column>
          <el-table-column prop="person" label="对接人" width="189">
          </el-table-column>

          <el-table-column label="操作" width="190" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 10, 15, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 表格信息展示end -->
    <!-- Form -->
    <el-dialog :title="this.title" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="所属分类">
          <el-select v-model="form.fromColumn" placeholder="全部">
            <el-option label="快递服务" value="1"></el-option>
            <el-option label="外卖订单" value="2"></el-option>
            <el-option label="银行客服" value="3"></el-option>
            <el-option label="酒店预订" value="4"></el-option>
            <el-option label="包车服务" value="5"></el-option>
            <el-option label="会场预定" value="6"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="固定电话" :label-width="formLabelWidth">
          <el-input v-model="form.fixedTelephone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="移动电话" :label-width="formLabelWidth">
          <el-input v-model="form.mobilePhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="对接人" :label-width="formLabelWidth">
          <el-input v-model="form.person" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSeal()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import axios from "axios";

export default {
  data() {
    return {
      // 条查以及分页的表单
      title:"新增通讯录",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      form: {},
      dialogFormVisible: false,
      formLabelWidth:"",
      searchData: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
      total1: "",
    };
  },
  created() {
    // 初始化条查
    this.seachTableData();
  },

  methods: {
    // 查询
    seachTableData() {
      this.searchData.currentPage = this.pageNum;
      this.searchData.pageSize = this.pageSize;
      axios.post("address/queryAddress", this.searchData).then((res) => {
        console.log(res);
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        this.total1 = res.data.data.total;
      });
    },
    //新增
    addSeal() {
      axios.post("/address/addAddress", this.form).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("操作成功");
          this.seachTableData();
          this.dialogFormVisible = false;
        } else {
          this.$message.error("操作失败");
          this.seachTableData();
        }
      });
    },

    //重置按钮
    resetQuery() {
      this.searchData = {};
      this.seachTableData();
    },
    // 编辑 弹框回显 修改标题走修改方法
    handleEdit(index, row) {
      this.name = "新增通讯录";
      this.dialogFormVisible = true;
      console.log(row);
      this.form = row;
      // this.$router.push({
      //   name: 'addOrUpdateSeal',
      //   params: row
      // });
    },
    // 删除
    handleDelete(index, row) {
      axios.post("/address/deleteAddress?id=" + row.id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.seachTableData();
        } else {
          this.$message.error("删除失败");
          this.seachTableData();
        }
      });
    },

    // 点击弹框的取消数据清空，事件关闭
    call() {
      this.AddHolidayFrom = {};
      this.centerDialogVisible = false;
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.seachTableData();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pageNum = val;
      this.seachTableData();
    },
    // 时间按钮递增
    handleChange(value) {
      console.log(value);
    },

    //左侧条查
    searchData1() {
      (this.searchData.fromColumn = 1), this.seachTableData();
    },
    searchData2() {
      (this.searchData.fromColumn = 2), this.seachTableData();
    },
    searchData3() {
      (this.searchData.fromColumn = 3), this.seachTableData();
    },
    searchData4() {
      (this.searchData.fromColumn = 4), this.seachTableData();
    },
    searchData5() {
      (this.searchData.fromColumn = 5), this.seachTableData();
    },

    searchData6() {
      (this.searchData.fromColumn = 6), this.seachTableData();
    },
    searchAll() {
      (this.searchData.fromColumn = ""), this.seachTableData();
    },
  },
};
</script>
  
  <style scoped>
 .oneDiv {
    width: 100%;
    height: 100%;
    margin-top: -14px;
    background-color: rgba(244, 244, 244, 1);
    padding-top: 20px;
  }
  
  /* 装信息和条查的盒子 */
  .sumDiv {
    width: 100%;
    height: 1000px;
    margin: auto;
  }
  
  /* 搜索框和按钮的盒子 */
  .headFromDiv {
    width: 90%;
    height: 80px;
    /* margin: auto; */
    background-color: #fff;
    border-radius: 9px;
  }
  
  /* 左侧的 */
  .leftDiv {
    float: left;
    padding-top: 20px;
    padding-left: 25px;
  }
  
  .rightDiv {
    float: right;
    margin-top: 20px;
    margin-right: 15px;
  }
  
  .bottomDiv {
    width: 70%;
    height: 100%;
    /* margin: auto; */
    float: left;
    margin-top: 20px;
    padding-top: 20px;
    background-color: #fff;
    border-radius: 9px;
    margin-left:30px ;
   
  }
  
  /* 分页的盒子 */
  .block {
    text-align: right;
    margin-top: 10px;
    margin-right: 20px;
  }
  
  .el-row {
    margin-bottom: 20px;
  }
  
  .el-col {
    border-radius: 4px;
  }
  
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  
  
  .block {
    margin-top: 20px;
    text-align: right;
    padding-right: 20px;
  }
  .leftDiv2{
    width: 18%;
    height: 100%;
    background-color: #fff;
    float: left;
    margin-top: 48px;
    border-radius: 10 px;
  }
  .item{
    text-align: center;
    margin-top: 20PX;
    border-radius: 20px;
  }
</style>